<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
  <div id="app">
      <p>{{num}}</p>
      <button @click="add(2)">变化了</button>
  </div>
</body>
<script>

    var addchange = {
        updated: function(){
            console.log("每次都变化");
        }
    }
    var app = new Vue({
        el:"#app",
        data:{
            num:2
        },
        methods:{
            add:function(num){
                this.num = this.num+parseInt(num);
            }
        },
        mixins:[addchange]
    })
    app.$watch("num",function(newval,oldval){
        if(newval>20&&newval<24)
        {
            console.log("超过20了");
        }else if(newval>20&&newval<40)
        {
            console.log("在20到40之间")
        }
    })
</script>
</html>